<template>
  <view class="page">
    <view class="main-page">
      <view class="list">
        <view class="list-item">
          登录账号
          <input class="input" v-model="login_name" disabled placeholder="请输入您的登录账号" />
        </view>
        <!-- <view class="list-item">
          验证码
          <view class="box">  
            <input class="input" v-model="phone" placeholder="请输入验证码" />
            <view class="capt-btn" @click="getCaptCode">获取验证码</view>
          </view>
        </view> -->
        <view class="list-item">
          设定密码
          <input class="input" v-model="new_password" placeholder="请输入您的密码" />
        </view>
        <view class="list-item">
          校验
          <view class="box">
            <input class="input" v-model="captcha" placeholder="请输入" />
            <view class="capt-img-box" @click="changeGif">
              <image class="gif-img" :src="gifImg"/>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-button">
      <view class="back-btn" @click="comfirmChange">
        下一步
      </view>
    </view>
  </view>
</template>

<script>
  import { computed } from "vue";
  import {baseUrl} from "../../config";
  export default {
    data() {
      return {
        login_name: uni.getStorageSync('myProfile').login_name,
        captcha: '',
        new_password: '',
        disabled: true,
        timestamp: new Date().getTime(),
        gifImg: computed(()=> baseUrl + '/api/User/GifHybridCode?timestamp='+ this.timestamp),
      }
    },
    methods: {
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      },
      async comfirmChange() {
        let res = await this.API.ResetUserPassword({
          password: this.new_password,
          user_name: this.login_name,
          captcha: this.captcha,
          timestamp: this.timestamp
        })
        if(res.accessToken){
          //成功
          uni.setStorageSync('token', res.accessToken);
          let myProfile = await this.API.MyProfile()
          if(myProfile.user_type_id == 4){
            uni.setStorageSync('myProfile', myProfile);
          }
          this.goBack()
        }
      },
      getCaptCode() {},
      changeGif() {
        this.timestamp = new Date().getTime()
      }
    }
  }
</script>

<style lang="less" scoped>
  .bottom-button {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    background-color: #fff;
    height: calc(144rpx + env(safe-area-inset-bottom));
    padding: 26rpx 32rpx;
  }
  .back-btn {
    width: 686rpx;
    height: 92rpx;
    background: #2776FF;
    border-radius: 12rpx;
    border: 2rpx solid #E6EBF1;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 34rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 88rpx;
    &.disabled {
      opacity: 0.4;
    }
  }
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  .main-page {
    height: calc(100% - 144rpx - env(safe-area-inset-bottom));
    padding: 24rpx;
    .list {
      background: #FFFFFF;
      border-radius: 24px;
      padding: 0 32rpx;
      .list-item {
        height: 128rpx;
        background: #FFFFFF;
        box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6EBF1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        .input {
          width: 300rpx;
          height: 128rpx;
          line-height: 128rpx;
          text-align: right;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #000000;
          &::placeholder {
            color: #BFBFBF;
          }
        }
        .box {
          width: 500rpx;
          height: 100%;
          line-height: 128rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        .capt-btn {
          height: 52rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #2776FF;
          line-height: 52rpx;
          margin-left: 16rpx;
        }
        .capt-img-box {
          width: 180rpx;
          height: 64rpx;
          background-color: #d8d8d8;
          margin-left: 16rpx;
          display: flex;
        }
        .gif-img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>